<template>
  <div id="myChart"></div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "Spot",
    mounted: function () {
      const that = this;
      this.getData();
    },
    methods:{
      getData(){
        const that=this;
        const loading = this.$loading({
          lock: true,
          text: '请求轨迹数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get("http://localhost:8089/try/car/spot").then(function (result) {
          if(result.data.length>0){
            let data=result.data;
            let points=[];
            for (let i = 0; i <data.length ; i++) {
              let j=i+1;
              points.push({name:"20_"+j,value:[data[i].lng.toFixed(2),data[i].lat.toFixed(2),data[i].num]})
            }
            that.showChart(points);
          }
        }).catch(function (err) {
          console.log(err)
        }).finally(function () {
          loading.close();
        })
      },
      showChart(data){
        let myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption({
          title: {
            // text: '停留点识别',
            // subtext: '',
            // sublink: '',
            left: 'center'
          },
          tooltip : {
            trigger: 'item'
          },
          bmap: {
            center: [116.46, 39.92],
            zoom: 10,
            roam: true,
            mapStyle:{
              styleJson: [
                {
                  'featureType': 'land',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#081734'
                  }
                },
                {
                  'featureType': 'building',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#04406F'
                  }
                },
                {
                  'featureType': 'building',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'highway',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#015B99'
                  }
                },
                {
                  'featureType': 'highway',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'geometry',
                  'stylers': {
                    'color':'#003051'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'green',
                  'elementType': 'geometry',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'water',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#044161'
                  }
                },
                {
                  'featureType': 'subway',
                  'elementType': 'geometry.stroke',
                  'stylers': {
                    'color': '#003051'
                  }
                },
                {
                  'featureType': 'subway',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'railway',
                  'elementType': 'geometry',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'railway',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'all',
                  'elementType': 'labels.text.stroke',
                  'stylers': {
                    'color': '#313131'
                  }
                },
                {
                  'featureType': 'all',
                  'elementType': 'labels.text.fill',
                  'stylers': {
                    'color': '#FFFFFF'
                  }
                },
                {
                  'featureType': 'manmade',
                  'elementType': 'geometry',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'manmade',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'local',
                  'elementType': 'geometry',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'local',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'subway',
                  'elementType': 'geometry',
                  'stylers': {
                    'lightness': -65
                  }
                },
                {
                  'featureType': 'railway',
                  'elementType': 'all',
                  'stylers': {
                    'lightness': -40
                  }
                },
                {
                  'featureType': 'boundary',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#8b8787',
                    'weight': '1',
                    'lightness': -29
                  }
                }
              ]
            }

          },
          series : [
            {
              name: '热门出行站点',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: data,
              symbolSize: function (val) {
                return val[2] / 3000;
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925'
                }
              }
            },
            {
              name: '热门出行站点',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: data.sort(function (a, b) {
                return b.value[2] - a.value[2];
              }).slice(0, 6),
              symbolSize: function (val) {
                return val[2] / 3000;
              },
              showEffectOn: 'render',
              // rippleEffect: {
              //     brushType: 'stroke'
              // },
              hoverAnimation: true,
              // label: {
              //     normal: {
              //         formatter: '{b}',
              //         position: 'right',
              //         show: true
              //     }
              // },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  // shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        });
        let bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
      },
    }
  }
</script>

<style scoped>

</style>
